<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<style>
			.infobar{
				color:#ddd;
				background:#000;
				height:28px;
				line-height:28px;	
				position:fixed;
				right:20px;
				left:20px;
				bottom:0px;
				z-index:999999999;
				text-align:center;
				border-top-left-radius:10px;
				border-top-right-radius:10px;
				text-shadow:0px 0px 1px #ccc;}
			span#imgname{
				color:#fff;
				font-size:12px;
				text-shadow:1px 1px 1px #000;}
			span.reference{
				position:fixed;
				left:30px;
				bottom:0px;}
			span.reference a{
				color:#888;
				text-decoration:none;}
			#thumbs{
				position:fixed;
				left:0px;
				right:0px;
				bottom:0px;
				height:100%;
				width:736px;
				margin:0 auto;}
			#content{
			   position:absolute;
			   top:0px;
			   left:0px;
			   height:100%;
			   width:100%;
			   background:#333; }
			#content img{
				float:left;
				margin:2px;
				cursor:pointer;
				opacity:0.4;}
			#panel{
				background:#333;
				width:100%;
				height:0;
				position:fixed;
				bottom:0px;
				left:0px;
				right:0px;
				text-align:center;}
			#panel img{ 
				cursor:pointer;
				position:relative;
				border:1px solid #000;
				box-shadow:0px 0px 10px #111;	
				margin-top:80px;}
			#wrapper{
				position:relative;
				margin:40px auto 0px auto;}
			a#next,
			a#prev{
				width:40px;
				height:40px;
				position:fixed;
				cursor:pointer;
				outline:none;
				background: -webkit-gradient(linear, left bottom, left top, from(#111 ), to(#333));
				box-shadow:0px 0px 10px #000, 0px -1px 1px #999;
				line-height:35px;
				color:#999;
				display:none;}
			a#next{
				right:0px;
				top:50%;
				margin-top:-20px;
				border-top-left-radius:10px;
				border-bottom-left-radius:10px;}
			a#prev{
				left:0px;
				top:50%;
				margin-top:-20px;
				border-top-right-radius:10px;
				border-bottom-right-radius:10px;}
			a#next:active, a#prev:active{
				margin-top:-19px; }     

		</style>
</head>
<body>
<div class="infobar">
	<span id="imgname"></span>
	<span class="reference">
		<a href="#">image</a>
	</span>
</div>
<div id="thumbs">
	<div id="content">
		<img src="resources/img/page1.jpg" alt="resources/img/page1.jpg" style="width:180px;" title="PAGE_1"/>
		<img src="resources/img/page2.jpg" alt="resources/img/page2.jpg" style="width:180px;" title="PAGE_2"/>
		<img src="resources/img/page3.jpg" alt="resources/img/page3.jpg" style="width:180px;" title="PAGE_3"/>
		<img src="resources/img/page4.jpg" alt="resources/img/page4.jpg" style="width:180px;" title="PAGE_4"/>
		<img src="resources/img/page1.jpg" alt="resources/img/page1.jpg" style="width:180px;" title="PAGE_1"/>
		<img src="resources/img/page2.jpg" alt="resources/img/page2.jpg" style="width:180px;" title="PAGE_2"/>
		<img src="resources/img/page3.jpg" alt="resources/img/page3.jpg" style="width:180px;" title="PAGE_3"/>
		<img src="resources/img/page4.jpg" alt="resources/img/page4.jpg" style="width:180px;" title="PAGE_4"/>
		<img src="resources/img/page1.jpg" alt="resources/img/page1.jpg" style="width:180px;" title="PAGE_1"/>
		<img src="resources/img/page2.jpg" alt="resources/img/page2.jpg" style="width:180px;" title="PAGE_2"/>
		<img src="resources/img/page3.jpg" alt="resources/img/page3.jpg" style="width:180px;" title="PAGE_3"/>
		<img src="resources/img/page4.jpg" alt="resources/img/page4.jpg" style="width:180px;" title="PAGE_4"/>
		<img src="resources/img/page1.jpg" alt="resources/img/page1.jpg" style="width:180px;" title="PAGE_1"/>
		<img src="resources/img/page2.jpg" alt="resources/img/page2.jpg" style="width:180px;" title="PAGE_2"/>
		<img src="resources/img/page3.jpg" alt="resources/img/page3.jpg" style="width:180px;" title="PAGE_3"/>
		<img src="resources/img/page4.jpg" alt="resources/img/page4.jpg" style="width:180px;" title="PAGE_4"/>
	</div>
</div>
<div id="panel">
	<div id="wrapper">
		<a id="prev">prev</a>
		<a id="next">next</a>
	</div>
</div>
	<script type="text/javascript">
			$(function(){

                var current = -1;
                var totalpictures = $('#content img').size();//16

                $('#content > img').hover(function () {
                    var $this   = $(this);
					$this.stop().animate({'opacity':'1.0'},200);	
                },function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'0.4'},200);	
                }).bind('click',function(){	 
					var $this   = $(this);
					$('<img/>').load(function(){
                        current 	= $this.index();	
                        var $theImage = $(this);
						$('#wrapper').append($theImage);
						$('#panel').animate({'height':'100%'},500,function(){
                            var title = $this.attr('title');

                            if(title != '') 
                                $('#imgname').html(title).show();

                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').fadeIn();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').fadeIn();
							$('#thumbs').css({'z-index':'0','height':'0px'});
                        });
                    }).attr('src', $this.attr('alt'));
                });


                $('#wrapper > img').live('click',function(){
					$this = $(this);
                    $('#imgname').empty().hide();
					$('#prev, #next').fadeOut();
					$('#thumbs').css('z-index','10').stop().animate({'height':'100%'},500,function(){
                        var $theWrapper = $(this);
                        $theWrapper.css('z-index','0');
                        $('#panel').css('height','0px');
                        $this.remove();
                    });

                });


                $('#next').bind('click',function(){
                    var $this = $(this);	
                    var $nextimage = $('#content img:nth-child('+parseInt(current+2)+')');
                    navigate($nextimage,'right');	
                });
                $('#prev').bind('click',function(){
                    var $this  = $(this);
                    var $previmage = $('#content img:nth-child('+parseInt(current)+')');
                    navigate($previmage,'left');		
                });		

                function navigate($nextimage,nav){
                    if(nav=='left' && current==0)	
                        return;
                    if(nav=='right' && current==parseInt(totalpictures-1))	
                        return;

                    $('<img/>').load(function(){
						var $theImage = $(this);
						$('#imgname').empty().fadeOut();
						$('#wrapper img').stop().fadeOut(500,function(){
                            var $this = $(this);								
                            $this.remove();
							$('#wrapper').append($theImage.show())
                            

                            if(current==0)				
                                $('#prev').hide();
                            else				
                                $('#prev').show();
                            if(current==parseInt(totalpictures-1))		
                                $('#next').hide();
                            else
                                $('#next').show();

                            var title = $nextimage.attr('title');
                            if(title != ''){
                                $('#imgname').html(title).show();		
                            }
                        });
                        if(nav=='right')
                            ++current;
                        else if(nav=='left')
                            --current;
                    }).attr('src', $nextimage.attr('alt'));

                }

			});
		</script>
</body>
</html>